import React, { useState, useEffect, useRef } from "react";
import { Table, Tabs } from 'antd';
import type { TableColumnsType } from 'antd';

import Common from "@/components/common/index"
import { amountList, printUseFlagById } from "@/common/api"


const Amount: React.FC = () => {
    useEffect(() => {
        getData()
    }, []);
    const [loadings, setLoadings] = useState<boolean>(false);
    const [tableData, setTableData] = useState<any[]>([]);
    const getData = () => {
        let param = {
            pageSize: pageSizeRef.current,
            pageNum: pageNumRef.current,
        }
        setLoadings(true)
        amountList(param).then((res: any) => {
            setLoadings(false)
            if (res.success) {
                setTableData(res.data.records)
                total.current = res.data.total
                setSelectedRowKeys(res.data.records.filter((i: any) => i.useFlag == 1).map((t: any) => t.id))
            } else {

            }
        })
    }


    const columns: TableColumnsType = [
        {
            title: '序号',
            dataIndex: 'index',
            width: 70,
            align: 'center' as const,
            onCell: () => ({ style: { textAlign: 'center' } }),
            render: (_text, _record, index) => index + 1,
        },
        {
            title: '接收单位',
            dataIndex: 'acceptUnit',
            width: 150,
        },
        {
            title: '订单编号',
            dataIndex: 'orderCode',
            width: 120,
        },
        {
            title: '订单重量(吨)',
            dataIndex: 'orderStowage',
            width: 120,
        },
        {
            title: '设备码',
            dataIndex: 'facilityCode',
            width: 120,
        },
        {
            title: '设备描述',
            dataIndex: 'codeDescribe',
            width: 200,
        },
        {
            title: '剩余数量(只)',
            dataIndex: 'planNum',
            width: 150,
        },
    ];
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

    const rowSelection = {
        selectedRowKeys,
        onChange: (keys: React.Key[], rows: any) => {
            setSelectedRowKeys(keys);
            printUseFlagById({ ids: rows.map((i: any) => i.id).join(',') }).then((res: any) => {
                if (res.success) {
                    $message.success('操作成功');
                    getData()
                } else {
                    $message.error(res.message);
                }
            })
        },
    };
    const getTable = () => {
        return <div style={{ height: '90%', display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
                <Tabs
                    type="card"
                    items={[{ label: '余量看板', key: '1' }]}
                    activeKey='0'
                />
            </div>
            <Table
                columns={columns}
                dataSource={tableData}
                scroll={{ x: 'max-content' }}
                pagination={false}
                sticky={true}
                style={{ flex: '1', overflowY: 'auto', overflowX: 'hidden' }}
                rowKey="id"
                loading={loadings}
                rowSelection={rowSelection}
            />
        </div>
    }


    const total = useRef(0);
    const pageNumRef = useRef(1);
    const pageSizeRef = useRef(300);
    // const [current, setCurrent] = useState<number>(1);
    // const onChange: PaginationProps['onChange'] = (page, pageSize) => {
    //     pageNumRef.current = page;
    //     pageSizeRef.current = pageSize;
    //     setCurrent(page)
    //     // getData()
    // }
    // const getPagination = () => {
    //     return <><Pagination
    //         size="small"
    //         total={total.current}
    //         showSizeChanger
    //         showQuickJumper
    //         showTotal={(total) => `共 ${total} 条`}
    //         onChange={onChange}
    //         current={current}
    //     />

    //     </>
    // }
    return <Common table={getTable()} />
}

export default Amount